<template>
  <view class="page-agent">
    <view class="header">
      <view class="title">{{ $t('agent.专属客户服务') }}</view>
      <uni-icons type="left" color="#ffffff" size="24" class="back-icon" @click="handleBack"></uni-icons>
    </view>
    <view class="line"></view>
    <view class="content">
      <view class="card-wrapper">
        <image src="~@/static/images/mine/agent-bg.png" alt="" class="bg-img" mode="aspectFill" />
        <view class="card">
          <view class="card-item">
            <image src="~@/static/images/agent/agent1.png" alt="" class="card-img" mode="aspectFill" />
            <!-- <uni-icons type="vip-filled" color="#ffffff" size="30" class="back-icon"></uni-icons> -->
            <view class="label">{{ $t('agent.代理级别') }}</view>
            <view class="value">{{ agentInfo.title }}</view>
          </view>
          <view class="card-item">
            <image src="~@/static/images/agent/agent2.png" alt="" class="card-img" mode="aspectFill" />
            <!-- <uni-icons type="calendar-filled" color="#ffffff" size="30" class="back-icon"></uni-icons> -->
            <view class="label">{{ $t('agent.结算佣金') }}</view>
            <view class="value">{{ agentInfo.commission }}($)</view>
          </view>
        </view>
      </view>
      <view class="tabs">
        <view class="tab-item" :class="{ 'is-active': active == '1' }" @click="handleChangeActive('1')">{{ $t('agent.代理项目') }}</view>
        <view class="tab-item" :class="{ 'is-active': active == '2' }" @click="handleChangeActive('2')">{{ $t('agent.佣金记录') }}</view>
      </view>
      <view class="title">{{ active == '1' ? $t('agent.代理项目') : $t('agent.佣金记录') }}</view>
      <view class="list">
        <view class="list-item" v-for="(v, i) in list" :key="i">
          <view class="item-info">
            <view class="info-title">{{ v.title }}</view>
            <view class="info-desc">{{ v.subTitle }}</view>
          </view>
          <view class="item-content">
            <view class="content-item">
              <view class="left">
                <view class="label">{{ $t('agent.项目金额') }}:</view>
                <view class="value">{{ v.money }}($)</view>
              </view>
              <view v-if="active == 2" class="right"> {{ $t('agent.结算佣金') }}</view>
            </view>
            <view class="content-item" style="margin-top: 5px">
              <view class="left">
                <view class="label">{{ $t('agent.项目提成') }}:</view>
                <view class="value">{{ v.pencent }}%</view>
              </view>
              <view v-if="active == 2" class="right" style="color: #d49962"> {{ v.profit }}($) </view>
            </view>
          </view>
          <view class="info-time" v-if="active == 1">{{ $t('agent.审核日期') }}: {{ v.checkDate }}</view>
          <view class="info-time" v-if="active == 2">{{ $t('agent.结算日期') }}: {{ v.settleDate }}</view>
        </view>
        <uni-load-more v-if="active == 1" :status="more" :contentText="{ contentdown: $t('common.上拉显示更多'), contentrefresh: $t('common.正在加载'), contentnomore: $t('common.没有更多数据了') }" @clickLoadMore="loadMore"></uni-load-more>
      </view>
    </view>
  </view>
</template>
<script>
  import { agentStatic, refundlogList } from '@/api/agent'
  import { orderList } from '@/api/order.js'

  export default {
    data() {
      return {
        active: 2,
        agentInfo: {},
        list: [],
        page: 1,
        limit: 30,
        more: 'more'
      }
    },
    onPullDownRefresh() {
      this.getAgentStatic()
      this.getData()
      uni.stopPullDownRefresh()
    },
    methods: {
      //返回
      handleBack() {
        // uni.navigateBack()
        this.$tab.switchTab('/pages/index')
      },
      //代理中心
      getAgentStatic() {
        agentStatic().then((res) => {
          this.agentInfo = res.result || {}
        })
      },
      //获取订单
      getOrder() {
        this.$modal.loading('loading', 'loading')
        orderList({
          status: 1,
          page: this.page,
          limit: this.limit
        })
          .then((res) => {
            let { list } = res.result
            let { total, records } = list
            this.list.push(...records)
            if (total == this.list.length) {
              this.more = 'noMore'
            } else {
              this.more = 'more'
            }
            this.$modal.closeLoading()
          })
          .catch((err) => {
            this.$modal.closeLoading()
          })
      },
      //佣金记录
      getRefundlogList() {
        this.$modal.loading('loading', 'loading')
        refundlogList({
          refund_type: 1
        })
          .then((res) => {
            this.$modal.closeLoading()
            let { list } = res.result
            this.list = list
          })
          .catch((err) => {
            this.$modal.closeLoading()
          })
      },
      //切换
      handleChangeActive(active) {
        this.active = active
        this.getData()
      },
      getData() {
        this.page = 1
        this.list = []
        this.limit = 30
        this.more = 'more'
        if (this.active == 2) {
          this.getRefundlogList()
        } else if (this.active == 1) {
          this.getOrder()
        }
      },
      loadMore(e) {
        if (this.more == 'noMore') return
        this.more = 'loading'
        this.page++
        if (this.active == 2) {
          this.getRefundlogList()
        } else if (this.active == 1) {
          this.getOrder()
        }
      }
    },
    created() {
      this.getAgentStatic()
      this.getData()
    }
  }
</script>
<style lang="scss" scoped>
  .page-agent {
    position: relative;
    .header {
      background-color: #31b2b5;
      text-align: center;
      height: 44px;
      line-height: 44px;
      position: fixed;
      top: 0;
      width: 100vw;
      color: #fff;

      font-size: 26rpx;
      z-index: 9;
      .back-icon {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-weight: normal;
      }
    }
    .line {
      height: 20px;
      width: 100vw;
      background-color: #edf7f9;
      margin-top: 44px;
    }
    .content {
      .card-wrapper {
        margin-top: 40px;
        width: 100%;
        height: 130px;
        position: relative;
        .bg-img {
          width: 100%;
          height: 100%;
        }
        .card {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 6;
          // height: 130px;
          display: flex;
          // background: linear-gradient(90deg, #91aae5 0%, #6083d6 100%);
          // background: url('~@/static/images/mine/agent-bg.png') no-repeat 49% 30%;
          .card-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #fff;
            .label {
              font-size: 26rpx;
              margin-top: 5px;
            }
            .value {
              font-size: 32rpx;

              margin-top: 5px;
            }
            .card-img {
              width: 40px;
              height: 40px;
            }
          }
        }
      }
      .tabs {
        display: flex;
        height: 40px;
        border-radius: 3px;
        margin: 10rpx 15rpx 20rpx;
        padding: 5px;
        background-color: #eeeeef;
        .tab-item {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 26rpx;
          &.is-active {
            background-color: #fff;
            border-radius: 3px;
            color: rgb(60, 156, 255);
          }
        }
      }
      .title {
        height: 40px;
        line-height: 40px;
        font-size: 32rpx;
        border-bottom: 1px #ccc solid;
        margin: 0 20rpx;
      }
      .list {
        margin: 0 20rpx;
        .list-item {
          position: relative;
          border-bottom: 1px solid #ddd;
          padding-top: 20px;
          padding-bottom: 10px;
          padding-left: 10px;
          padding-right: 10px;
          .item-info {
            flex: 1;
            overflow: hidden;
            font-size: 24rpx;
            .info-title {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              color: #101010;

              font-size: 28rpx;
            }
            .info-desc {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              color: #999;
              margin-top: 6rpx;
            }
          }
          .item-content {
            padding: 5px 0;
            .content-item {
              display: flex;
              justify-content: space-between;
              align-items: center;

              .left {
                display: flex;
                align-items: center;
                .label {
                  font-size: 26rpx;
                  color: #666;
                }
                .value {
                  font-size: 28rpx;
                  color: #d49962;
                }
              }
            }
          }
          .info-time {
            display: flex;
            justify-content: flex-end;
            font-size: 24rpx;
          }
        }
      }
    }
  }
</style>
